<template>
  <div class="guest-pages column justify-center items-center">
    <div class="row q-gutter-x-lg q-mb-lg">
      <q-icon name="mdi-playlist-play" size="98px" />
      <q-icon name="mdi-history" size="98px" />
      <q-icon name="mdi-star" size="98px" />
    </div>
    <div class="q-my-md" style="font-size: 24px">
      {{ $t('guest.library.hint1') }}
    </div>
    <div class="q-mb-lg" style="font-size: 16px">
      {{ $t('guest.library.hint2') }}
    </div>
    <div class="row">
      <q-btn
        flat
        icon="account_circle"
        color="white"
        @click="openLoginDialog"
        no-caps
        >{{ $t('common.signIn') }}</q-btn
      >
      <q-btn rounded color="accent" @click="openRegisterDialog" no-caps>{{
        $t('common.createAccount')
      }}</q-btn>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useGlobalStore } from 'src/stores/global-store';

const globalStore = useGlobalStore();
function openRegisterDialog() {
  globalStore.showSignupDialog = true;
}
function openLoginDialog() {
  globalStore.showSigninDialog = true;
}
</script>
